<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="df fclonum">
    <header>
        <!-- 2.插件使用: 引入html结构 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg01">
                    
                </div>
                <div class="swiper-slide bg02">

                </div>
                <div class="swiper-slide bg03">

                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination abs"></div>

            <!-- 如果需要导航按钮
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->


            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </header>
    <main>
        <div class="firstbox">
            <!-- 排名 -->
            <div class="ranking">
                <p>9</p>
                <img src="../../assets/imgs/index-card-rank.png" alt="">
                <span>今日排名</span>
            </div>
            <!-- 打卡 -->
            <div class="Clock">
                <img src="../../assets/imgs/index-card-sum.png" alt="">
                <span>累计打卡23天</span>
                <h3>今日打卡</h3>
            </div>
        </div>
        <div class="scendbox">
            <!-- 运动数据 -->
            <div class="Movement ">
                <p>运动数据</p>
            </div>
            <!-- 累计运动勋章 -->
            <div class="badge">
                <img src="../../assets/imgs/index-card-badge.png" alt="">
                <p>3<span>枚</span></p>
                <span>累计运动徽章</span>
            </div>
        </div>
        <!-- 课程训练 -->
        <div class="Training">
            <h1>课程训练</h1>
        </div>
        <!-- 户外跑步 -->
        <div class="running">
            <h1>户外跑步</h1>
        </div>
    </main>
    <!-- 尾部4按钮 -->
    <footer class="df fclonum" id="footer">
        <ul>
            <!-- 首页 -->
            <li class="home">
                <span class="icon iconfont">&#xe62d;</span>
                <div class="name">首页</div>
            </li>
            <!-- 运动 -->
            <li class="sport">
                <span class="icon iconfont">&#xe611;</span>
                <div class="name">运动</div>
            </li>
            <!-- 圈子 -->
            <li class="circle">
                <span class="icon iconfont">&#xe606;</span>
                <div class="name">圈子</div>
            </li>
            <!-- 我的 -->
            <li class="me">
                <span class="icon iconfont">&#xe70b;</span>
                <div class="name">我的</div>
            </li>
        </ul>
    </footer>
</body>

</html>